<template>
	<h1>我是User页面,<mark>{{route.params.id}}</mark></h1>
	
	<!-- <router-link :to="'/user/'+route.params.id+'/add'">添加</router-link>|
	<router-link :to="'/user/'+route.params.id+'/remove'">删除</router-link> -->
	
	
	<router-link :to="addPath">添加</router-link>|
	<router-link :to="removePath">删除</router-link>
	<router-view></router-view>
	
</template>

<script setup>
	import { onUpdated, ref } from 'vue';
	import { onBeforeRouteUpdate, useRoute } from 'vue-router';
	let route=useRoute();
	console.log(route)
	
	let addPath=ref('/user/'+route.params.id+'/add')
	let removePath=ref('/user/'+route.params.id+'/remove')
	// onUpdated(()=>{
	// 	console.log("更新")
	// 	addPath.value='/user/'+route.params.id+'/add'
	// 	removePath.value='/user/'+route.params.id+'/remove'
	// })
	
	onBeforeRouteUpdate((to,from)=>{
		//console.log("onBeforeRouteUpdate.....",to)
		addPath.value='/user/'+to.params.id+'/add'
		removePath.value='/user/'+to.params.id+'/remove'
	})
	
	
</script>

<style>
</style>